<template>
    <div class="safe_view" style="width:1000px">
        <el-button icon="el-icon-back" class="back" @click="$router.back()">返回</el-button>
        <div class="view clearfix" v-if="item">
            <div class="left">
                <!-- tab -->
                <div class="img_box"
                    ref="img_box"
                    @mousemove="move"
                    @mouseover="flag=true"
                    @mouseout="flag=false" >
                    <img :src="mid_img" alt />
                    <div class="big_img_box" v-show="flag">
                        <img :src="mid_img" :style="{left:left+'px',top:top+'px'}" alt />
                    </div>
                    <div class="mark" :style="{left:l+'px',top:t+'px'}" v-show="flag"></div>
                </div>
                <div class="img_btns clearfix">
                    <img
                        v-for="x in item.imgs"
                        :class="{con:x==mid_img}"
                        :key="x"
                        :src="x"
                        @click="mid_img=x"
                        alt
                    />
                </div>
            </div>

            <div class="left right">
                <h2 class="title">{{item.title}}</h2>
                <p class="supplier">{{item.supplier}}</p>
                <p class="price">￥{{item.price}}</p>
                <el-rate :value="value" disabled show-score style="margin:10px 0" text-color="purple"></el-rate>
                <el-button type="danger" @click="add()">添加到购物车</el-button>
            </div>
        </div>
        <div class="same">
            <h4>相似商品推荐</h4>
            <list class="list" :list="same_list"></list>
        </div>
    </div>
</template>
<script>
import $ajax from "../plugins/ajax";
export default {
    beforeRouteEnter: async function(to, from, next) {
        var res = await $ajax("/detail?goodId=" + to.params.goodId);
        next(vm => {
            vm.item = res.data[0];
            vm.item.imgs = JSON.parse(vm.item.imgs);
            vm.mid_img = vm.item.imgs[0];
        });
    },
    beforeRouteUpdate: async function(to, from, next) {
        var res = await $ajax("/detail?goodId=" + to.params.goodId);
        this.item = res.data[0];
        this.item.imgs = JSON.parse(this.item.imgs);
        this.mid_img = this.item.imgs[0];
        this.$store.commit("loading", false);
        next();
    },
    data() {
        return {
            item: null,
            mid_img: "",
            left: 0,
            top: 0,
            l: 0,
            t: 0,
            flag: false,
            same_list: []
        };
    },
    watch: {
        item: async function({ type_one, type_two, Id,title }) {
            document.title=title;
            this.same_list = [];
            var res = await this.$ajax(
                "/goodList?type_one=" + type_one + "&type_two=" + type_two
            );
            // "/shoplist?token="+decodeURIComponent(token)
            // 删除当前商品
            res.data.forEach((item, index) => {
                if (item.Id == Id) {
                    res.data.splice(index, 1);
                }
            });
            // 随机展示同类商品
            function random(a) {
                return Math.floor(Math.random() * (a + 1));
            }
            if (res.data.length > 10) {
                for (var i = 0; i < 10; i++) {
                    var index = random(res.data.length - 1);
                    this.same_list.push(res.data[index]);
                    res.data.splice(index, 1);
                }
            } else {
                this.same_list = res.data.slice(0, 10);
            }
        }
    },
    computed: {
        value() {
            return Math.abs((parseInt(this.item.nice) % 10) - 5);
        }
    },
    methods: {
        move(e) {
            var x = e.clientX;
            var y = e.clientY;
            var ot = this.$refs.img_box.offsetTop;
            var ol = this.$refs.img_box.offsetLeft;
            var st =
                document.body.scrollTop || document.documentElement.scrollTop;
            x -= ol;
            y = y - ot + st;
            x = x < 130 ? 130 : x;
            x = x > 270 ? 270 : x;
            y = y < 130 ? 130 : y;
            y = y > 270 ? 270 : y;
            this.left = (-x / 2) * 3 + 200;
            this.top = (-y / 2) * 3 + 200;
            this.l = x - 130;
            this.t = y - 130;
        },
        add() {
            var token = this.$store.state.token;
            if (token) {
                // 发送添加请求
                (async () => {
                    var res = await this.$ajax(
                        "/add?goodId=" + this.item.Id + "&token=" + token
                    );
                    var code = res.data.code;
                    if (code == 0) {
                        this.$message({
                            message: "登录过期，即将跳转到登录页",
                            type: "warning"
                        });
                        setTimeout(() => {
                            this.$router.push(
                                "/login?url=" + this.$route.fullPath
                            );
                        }, 2000);
                    } else if (code == 1) {
                        this.$message({
                            type:"success",
                            message:"添加成功"
                        });
                    }else{
                        this.$message.error('添加失败,请稍后再试');
                    }
                })();
            } else {
                this.$message({
                    message: "您还没有登录，即将跳转到登录页",
                    type: "warning"
                });
                setTimeout(() => {
                    this.$router.push("/login?url=" + this.$route.fullPath);
                }, 2000);
            }
        }
    }
};
</script>
<style scoped>
.price {
    color: red;
}
.supplier {
    color: #666;
}
.list {
    width: 1000px;
}
.list >>> li {
    width: 180px;
    margin: 5px;
    padding: 5px;
}
.list >>> img {
    height: 180px;
}

.same {
    margin-top: 20px;
}
.same h4 {
    color: #666;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
}

img {
    display: block;
}
.back {
    margin-top: 10px;
}
.img_box {
    width: 400px;
    position: relative;
    cursor: crosshair;
}
.img_box img {
    width: 100%;
    border-radius: 10px;
}
.img_btns img {
    width: 80px;
    float: left;
    box-sizing: border-box;
    border: 2px solid white;
}
.img_btns .con {
    border-color: rgb(110, 73, 110);
}
.big_img_box {
    position: absolute;
    top: 0;
    left: 400px;
    width: 400px;
    height: 400px;
    overflow: hidden;
    z-index: 1000000;
    border-radius: 10px;
}
.mark {
    width: 260px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.big_img_box img {
    width: 600px;
    position: absolute;
    left: 0;
    top: 0;
}
.left {
    float: left;
}
.right {
    margin: 100px 0 0 180px;
}
.right p {
    margin: 20px 0;
}
</style>